<template>
	<view class="formea">
		<image src="https://star.googom.cn/chuangge/wednsad.png" mode="" class="wednsad"></image>
		<view class="container">
			<view class="allHead" :style="{height:topTitBox+'px',backgroundColor:config.bgcolor}">
				<view class="title" :style="{height:nHeight+'px',marginTop:phoneInfo.statusBarHeight+'px'}">
					<image src="@/static/icon/fanhui.png" mode="" class="bai_lett" @click="getback" v-if="sfferf < 50">
					</image>
					<image src="@/static/icon/back1.png" mode="" class="bai_lett" @click="getback" v-if="sfferf > 50">
					</image>
					<view class="xiaoxi_view" :style="{color:config.textcolor}">
						客户详情
					</view>
				</view>
			</view>
		</view>
		<view class="wimaf">
			<view class="wimaf_row">
				<view class="lisnrtsd"></view>
				<view class="lisnrjic">
					基础信息
				</view>
			</view>
			<view class="wimaf_rows">
				<view class="wimaf_rows_cloum">
					<view class="wimaf_rows_cloum_rows">
						<view class="zxtrda_name">
							{{kehuinfo.name}}
						</view>
						<view class="dengji" v-if="kehuinfo.level != ''">
							{{kehuinfo.level}}级
						</view>
						<view class="dengji" v-if="kehuinfo.aspect == 1">
							来电
						</view>
						<view class="dengji" v-if="kehuinfo.aspect == 2">
							来访
						</view>
					</view>
					<view class="zhiyuedf">
						{{kehuinfo.sex == 0 ?'男':'女'}}{{kehuinfo.age == null ? '': '-'+kehuinfo.age+'岁'}} {{kehuinfo.job == '' ?'':'职业/'+kehuinfo.job}}
					</view>
				</view>
				<image src="@/static/images/avater.png" mode="" class="avater" v-if="kehuinfo.headImg == null"></image>
				<image :src="imageUrls+kehuinfo.headImg" mode="" class="avater" v-else></image>
			</view>
			<view class="custer_phbone_view">
				<image src="https://star.googom.cn/chuangge/dianhua.png" mode="" class="dianhua"
					@click="getphone(kehuinfo.phone)"></image>
				<view class="dianbus" @click="getphone(kehuinfo.phone)">
					{{kehuinfo.phone}}
				</view>
				<image src="https://star.googom.cn/chuangge/beiyongdh.png" mode="" class="beiyongdh" @click="getphone(kehuinfo.phone1)" v-if="kehuinfo.phone1 != null"></image>
			</view>
		</view>
		<view class="kefasdinfo">
			<view class="hjedssdf">
				<image src="https://star.googom.cn/chuangge/kehuqionmghkuian.png" mode="" class="kehuqionmghkuian">
				</image>
				<view class="hjedssdf_texty">
					{{kehuinfo.situationRemark == null ? '还未填写客户情况哦！' : kehuinfo.situationRemark}}
				</view>
				<view class="hjedssdf_shijians">
					<view class="hjedssdf_shijian">
						记录时间：{{kehuinfo.createTime}}
					</view>
					<view class="wuxiao" @click="getwuxiao(kehuinfo.status)">
						置为无效
					</view>
				</view>
			</view>
		</view>
		<view style="width: 100%;background-color: #F5F7FB;">
			<view class="vlsit_view">
				<image src="https://star.googom.cn/chuangge/jaiitngxinxi.png" mode="" class="jichuxinxi"></image>
				<view class="shujusdfs">
					<view class="touxiang">
						居住区域
					</view>
					<view class="touxiangssd" style="width: 435rpx;">
						<view class="xuansda" style="width: 435rpx;">
							{{kehuinfo.residentialArea == null ? '-':kehuinfo.residentialArea}}
						</view>
					</view>
				</view>
				<view class="shujusdfs">
					<view class="touxiang">
						工作区域
					</view>
					<view class="touxiangsd" style="width: 435rpx;">
						<view class="xuansda" style="font-size: 30rpx;color: #08112C;width: 435rpx;">
							{{kehuinfo.workArea == null ? '-':kehuinfo.workArea}}
						</view>
					</view>
				</view>
				<view class="shujusdfs">
					<view class="touxiang">
						家庭结构
					</view>
					<view class="touxiangssd" style="width: 311rpx;">
						<view class="xuansdas">
							{{kehuinfo.familyStructure == null ? '-':kehuinfo.familyStructure}}
						</view>
					</view>
					<view class="xialsd"></view>
				</view>
				<view class="shujusdfs">
					<view class="touxiang">
						家庭成员
					</view>
					<view class="touxiangssd" style="width: 311rpx;">
						<view class="xuansdas">
							{{kehuinfo.familyMember == null ? '-':kehuinfo.familyMember}}
						</view>
					</view>
					<view class="xialsd"></view>
				</view>
				<view class="shujusdfs" style="border-style:none;">
					<view class="touxiang">
						居住环境
					</view>
					<view class="touxiangssd" style="width: 311rpx;">
						<view class="xuansdas">
							{{kehuinfo.living == null ? '-':kehuinfo.living}}
						</view>
					</view>
					<view class="xialsd"></view>
				</view>
			</view>
			<view class="vlsit_view">
				<image src="https://star.googom.cn/chuangge/goufangxinxi.png" mode="" class="jichuxinxi"></image>
				<view class="shujusdfs">
					<view class="touxiang">
						置业经验
					</view>
					<view class="touxiangssd" style="width: 311rpx;">
						<view class="xuansdas">
							{{kehuinfo.propertyExperience == null ? '-':kehuinfo.propertyExperience}}
						</view>
					</view>
					<view class="xialsd"></view>
				</view>
				<view class="shujusdfs">
					<view class="touxiang">
						意向产品
					</view>
					<view class="touxiangssd" style="width: 311rpx;">
						<view class="xuansda">
							{{kehuinfo.intentionalProduct ==null ? '-':kehuinfo.intentionalProduct}}
						</view>
					</view>
					<view class="xialsd"></view>
				</view>
				<view class="shujusdfs">
					<view class="touxiang">
						意向面积
					</view>
					<view class="touxiangsd">
						<view class="xuansda" >
							{{kehuinfo.intentionalArea == null ? '-':kehuinfo.intentionalArea}}
						</view>
					</view>
					<view class="imfgaf">
						m²
					</view>
				</view>
				<view class="shujusdfs">
					<view class="touxiang">
						意向单价
					</view>
					<view class="touxiangsd">
						<view class="xuansda">
							{{kehuinfo.intentionalPrice == null ? '-':kehuinfo.intentionalPrice}}
						</view>
					</view>
					<view class="imfgaf">
						元
					</view>
				</view>
				<view class="shujusdfs">
					<view class="touxiang">
						意向楼层
					</view>
					<view class="touxiangsd">
						<view class="xuansda">
							{{kehuinfo.intentionalFloor == null || kehuinfo.intentionalFloor == null ? '-':kehuinfo.intentionalFloor}}
						</view>
					</view>
				</view>
				<view class="shujusdfs">
					<view class="touxiang">
						意向楼号
					</view>
					<view class="touxiangssd">
						<view class="xuansda">
							{{kehuinfo.intentionalBuild == null ? '-':kehuinfo.intentionalBuild}}
						</view>
					</view>
					<view class="xialsd"></view>
				</view>
				<view class="shujusdfs">
					<view class="touxiang">
						意向单元
					</view>
					<view class="touxiangssd">
						<view class="xuansda">
							{{kehuinfo.intentionalUnit == null ? '-':kehuinfo.intentionalUnit}}
						</view>
					</view>
					<view class="xialsd"></view>
				</view>
				<view class="shujusdfs">
					<view class="touxiang">
						意向房号
					</view>
					<view class="touxiangsd">
						<view class="xuansda">
							{{kehuinfo.intentionalRoom == null ? '-':kehuinfo.intentionalRoom}}
						</view>
					</view>
				</view>
				<view class="shujusdfs">
					<view class="touxiang">
						置业目的
					</view>
					<view class="touxiangssd">
						<view class="xuansda">
							{{kehuinfo.propertyPurpose == null ? '-':kehuinfo.propertyPurpose}}
						</view>
					</view>
					<view class="xialsd"></view>
				</view>
				<view class="shujusdfs">
					<view class="touxiang">
						车位价位
					</view>
					<view class="touxiangsd">
						<view class="xuansda">
							{{kehuinfo.stall == null ? '-':kehuinfo.stall}}
						</view>
					</view>
					<view class="imfgaf">
						元
					</view>
				</view>
				<view class="shujusdfs">
					<view class="touxiang">
						储藏价位
					</view>
					<view class="touxiangsd">
						<view class="xuansda">
							{{kehuinfo.storeroom == null ? '-':kehuinfo.storeroom}}
						</view>
					</view>
					<view class="imfgaf">
						元
					</view>
				</view>
				<view class="shujusdfs">
					<view class="touxiang">
						总价预算
					</view>
					<view class="touxiangsd">
						<view class="xuansda" >
							{{kehuinfo.intentionalTotal == null ? '-':kehuinfo.intentionalTotal}}
						</view>
					</view>
					<view class="imfgaf">
						元
					</view>
				</view>
				<view class="shujusdfs">
					<view class="touxiang">
						关注重点
					</view>
					<view class="touxiangssd">
						<view class="xuansda">
							{{kehuinfo.focus == null ? '-':kehuinfo.focus}}
						</view>
					</view>
					<view class="xialsd"></view>
				</view>
				<view class="shujusdfs" style="border-style:none;">
					<view class="touxiang">
						认知途径
					</view>
					<view class="touxiangssd">
						<view class="xuansda">
							{{kehuinfo.way == null ? '-':kehuinfo.way}}
						</view>
					</view>
					<view class="xialsd"></view>
				</view>
			</view>
			<view class="bolck"></view>
			<view class="good_detil_navigationBar">
				<image src="https://star.googom.cn/chuangge/biani.png" mode="" class="biani"  @click="getbianji(kehuinfo.id)"></image>
				<image src="https://star.googom.cn/chuangge/shoucang.png" mode="" class="shoucang"></image>
				<view class="lianxi" @click="getphone(kehuinfo.phone)">
					联系客户
				</view>
				<view class="tjjl" @click="getaddjilu(kehuinfo.id)">
					添加记录
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import imageutil from '@/common/config.js'
	export default {
		data() {
			return {
				phoneInfo: uni.getSystemInfoSync(),
				jnInfo: uni.getMenuButtonBoundingClientRect(),
				// 整体盒子高度
				topTitBox: 0,
				// 平行胶囊高度
				nHeight: 0,
				config: {
					bgcolor: "transparent", //背景颜色
					textcolor: "#fff"
				},
				ids: 0,
				sfferf: 0,
				imageUrl: imageutil.configURL,
				imageUrls: imageutil.configURLs,
				kehuinfo: {}
			}
		},
		onPageScroll(res) {
			var a = this
			a.sfferf = res.scrollTop
			if (0 < res.scrollTop <= 40) {
				a.config.bgcolor = 'rgba(255, 255, 255,0)'
				a.config.textcolor = '#08112C'
			}
			if (40 < res.scrollTop <= 120) {
				a.config.bgcolor = 'rgba(255, 255, 255,0.2)'
				a.config.textcolor = '#08112C'
			}
			if (60 < res.scrollTop <= 220) {
				a.config.bgcolor = 'rgba(255, 255, 255,0.4 )'
				a.config.textcolor = '#08112C'
			}
			if (res.scrollTop > 220) {
				a.config.bgcolor = 'rgba(255, 255, 255,1)'
				a.config.textcolor = '#08112C'
			}
			if (res.scrollTop == 0) {
				a.config.bgcolor = 'rgba(255, 255, 255,0)'
				a.config.textcolor = '#fff'
			}
		},
		onLoad(option) {
			this.ids = option.id
			this.topTitBox = this.jnInfo.top - this.phoneInfo.statusBarHeight + this.jnInfo.bottom;
			// (this.jnInfo.top - this.phoneInfo.statusBarHeight) * 2 目的是计算出上下高度 + 胶囊本身高度
			this.nHeight = this.jnInfo.height + (this.jnInfo.top - this.phoneInfo.statusBarHeight) * 2
		},
		onShow() {
			//查询客户详情
			this.getcustmaer()
		},
		methods: {
			//这是无效
			async getwuxiao(e){
				var that = this
				uni.showLoading({
					title: '加载中',
					mask: true,
				});
				var tusf = e
				if(tusf == 0){
					tusf = 1
				}else{
					tusf = 0
				}
				let data = await that.$api.getcustomersss({
					id:that.ids,
					status: tusf
				});
				uni.hideLoading();
				if (data.code == 200) {
					uni.showToast({
						title: '修改成功',
						icon: 'none'
					})
					setTimeout(function() {
						that.getcustmaer()
					}, 1000);
				} else {
					uni.showToast({
						title: data.msg,
						icon: 'none'
					})
				}
			},
			//客户详情
			getcustmaer() {
				uni.request({
					url: this.imageUrl + 'crm/customer/' + this.ids,
					method: 'GET',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'Authorization': 'Bearer ' + uni.getStorageSync('token')
					},
					success: (res) => {
						console.log()
						if (res.data.code == 200) {
							this.kehuinfo = res.data.data
						} else {
							uni.showToast({
								title: data.msg,
								icon: 'none'
							})
						}
					},
				})
			},
			//跳转编辑客户
			getbianji(id){
				uni.navigateTo({
					url:'/pages/page/customer/update_customer?id='+id
				})
			},
			//跳转添加记录
			getaddjilu(id){
				uni.navigateTo({
					url:'/pages/page/customer/up_records?id='+id
				})
			},
			//拨打电话
			getphone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone,
				});
			},
			// 返回上一页
			getback() {
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.formea {
		width: 100%;
		height: 100vh;
		background-color: #F5F7FB;
	}

	.wednsad {
		width: 750rpx;
		height: 918rpx;
	}

	.container {
		width: 100%;

		.allHead {
			width: 100%;
			height: 668rpx;
			position: fixed;
			top: 0%;
			z-index: 90;

			.title {
				width: 57%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #ffffff;

				.bai_lett {
					width: 64rpx;
					height: 64rpx;
					margin-left: 20rpx;
				}
			}

		}
	}

	.wimaf {
		width: 702rpx;
		height: 288rpx;
		background: url('https://star.googom.cn/chuangge/beinttuposjn.png') no-repeat;
		background-size: 100% 100%;
		margin-left: 24rpx;
		position: relative;
		margin-top: -730rpx;

		.wimaf_row {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			margin-left: 24rpx;
			padding-top: 24rpx;
			box-sizing: border-box;

			.lisnrtsd {
				width: 4rpx;
				height: 32rpx;
				border-radius: 36rpx;
				background: #05CF67;
			}

			.lisnrjic {
				font-size: 30rpx;
				font-weight: bold;
				color: #08112C;
				margin-left: 8rpx;
			}
		}

		.wimaf_rows {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			margin-left: 24rpx;
			padding-top: 32rpx;
			box-sizing: border-box;

			.wimaf_rows_cloum {
				width: 500rpx;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: flex-start;

				.wimaf_rows_cloum_rows {
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;

					.zxtrda_name {
						font-size: 44rpx;
						font-weight: bold;
						color: #08112C;
					}

					.dengji {
						width: 72rpx;
						height: 36rpx;
						border-radius: 6rpx;
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;
						background: #05CF67;
						font-size: 24rpx;
						color: #FFFFFF;
						margin-left: 18rpx;
					}
				}

				.zhiyuedf {
					font-size: 28rpx;
					color: #08112C;
					margin-top: 12rpx;
				}
			}

			.avater {
				width: 128rpx;
				height: 128rpx;
				border-radius: 50%;
			}
		}

		.custer_phbone_view {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			margin-left: 24rpx;
			padding-top: 12rpx;
			box-sizing: border-box;

			.dianhua {
				width: 40rpx;
				height: 40rpx;
			}

			.dianbus {
				margin-left: 8rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #08112C;
			}

			.beiyongdh {
				width: 144rpx;
				height: 36rpx;
				margin-left: 26rpx;
			}
		}
	}

	.kefasdinfo {
		width: 702rpx;
		height: 446rpx;
		border-radius: 0rpx 0rpx 20rpx 20rpx;
		background: #FFFFFF;
		margin-left: 24rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-bottom: 20rpx;

		.hjedssdf {
			width: 670rpx;
			height: 406rpx;
			border-radius: 16rpx;
			background: rgba(5, 207, 103, 0.08);
			box-sizing: border-box;
			border: 2rpx solid #05CF67;

			.kehuqionmghkuian {
				width: 168rpx;
				height: 52rpx;
				margin-top: 16rpx;
			}

			.hjedssdf_texty {
				width: 630rpx;
				height: 250rpx;
				font-size: 28rpx;
				color: #08112C;
				line-height: 150%;
				margin-top: 16rpx;
				margin-left: 20rpx;
			}
			.hjedssdf_shijians{
				width: 100%;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				.hjedssdf_shijian {
					font-size: 24rpx;
					line-height: 130%;
					color: #08112C;
					margin-top: 16rpx;
					margin-left: 20rpx;
				}
				.wuxiao {
					width: 136rpx;
					height: 52rpx;
					border-radius: 66rpx;
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					background: #FFFFFF;
					box-sizing: border-box;
					border: 1rpx solid #05CF67;
					font-size: 24rpx;
					color: #05CF67;
					margin-right: 20rpx;
				}
			}
			

			.hengxin {
				width: 654rpx;
				height: 1rpx;
				background: rgba(0, 0, 0, 0.08);
				margin-left: 8rpx;
				margin-top: 24rpx;
			}

			.towdsd {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				margin-top: 12rpx;

				.beizhu {
					font-size: 26rpx;
					font-weight: bold;
					color: #08112C;
					margin-left: 20rpx;
				}

				.beiuzhu {
					width: 425rpx;
					font-size: 26rpx;
					color: #485A75;
					margin-left: 16rpx;
				}

				
			}
		}
	}

	.vlsit_view {
		width: 702rpx;
		border-radius: 20rpx;
		background: #FFFFFF;
		margin-left: 24rpx;
		padding-top: 20rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;

		.jichuxinxi {
			width: 168rpx;
			height: 52rpx;
		}

		.shujusdf {
			width: 702rpx;
			height: 96rpx;
			padding-left: 24rpx;
			box-sizing: border-box;
			border-width: 1rpx 0rpx 1rpx 0rpx;
			border-style: solid;
			border-color: #EBEEF5;
			margin-top: 20rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			.touxiang {
				width: 210rpx;
				font-size: 30rpx;
				color: #08112C;
			}

			.touxiangsd {
				width: 280rpx;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;

				.avater {
					width: 72rpx;
					height: 72rpx;
					border-radius: 50%;
				}
			}

			.xialsd {
				width: 40rpx;
				height: 40rpx;
				margin-right: 16rpx;
			}
		}

		.shujusdfs {
			width: 702rpx;
			height: 96rpx;
			padding-left: 24rpx;
			box-sizing: border-box;
			border-width: 0rpx 0rpx 1rpx 0rpx;
			border-style: solid;
			border-color: #EBEEF5;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;

			.touxiang {
				width: 210rpx;
				font-size: 30rpx;
				color: #08112C;
			}

			.touxiangsd {
				width: 410rpx;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;

				.onpus {
					width: 465rpx;
					font-size: 30rpx;
					color: #7C849C;
				}

				.onpuss {
					width: 465rpx;
					font-size: 30rpx;
					color: #08112C;
				}
			}

			.touxiangssd {
				width: 250rpx;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;

				.xuansda {
					width: 250rpx;
					font-size: 30rpx;
					color: #08112C;
				}

				.xuansdas {
					width: 250rpx;
					font-size: 30rpx;
					color: #08112C;
				}
			}

			.xialsd {
				width: 40rpx;
				height: 40rpx;
				margin-right: 16rpx;
			}
		}
	}

	.good_detil_navigationBar {
		width: 750rpx;
		height: 140rpx;
		opacity: 1;
		background: #fff;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		position: fixed;
		bottom: 0;
		z-index: 99;

		.biani {
			width: 80rpx;
			height: 76rpx;
			margin-bottom: 25rpx;
			margin-left: 24rpx;
		}

		.shoucang {
			width: 80rpx;
			height: 76rpx;
			margin-bottom: 25rpx;
			margin-left: 20rpx;
		}

		.lianxi {
			width: 244rpx;
			height: 72rpx;
			border-radius: 200rpx 0rpx 0rpx 200rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			background: rgba(5, 207, 103, 0.1);
			font-size: 30rpx;
			font-weight: bold;
			color: #05CF67;
			margin-bottom: 25rpx;
			margin-left: 34rpx;
		}

		.tjjl {
			width: 244rpx;
			height: 72rpx;
			border-radius: 0rpx 200rpx 200rpx 0rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			background: #05CF67;
			box-sizing: border-box;
			border: 1rpx solid #05CF67;
			font-size: 30rpx;
			font-weight: bold;
			color: #FFFFFF;
			margin-bottom: 25rpx;
		}
	}
	.imfgaf{
		font-size: 28rpx;
		color: #08112C;
		margin-right: 16rpx;
	}
</style>